<div class="box">
  <!--
  <div class="boxHeader">
    <div class="title">
      <h2 translate="MYVOLUMIO.MY_VOLUMIO"></h2>
    </div>
  </div> -->
  <div id="authLoginPlugin" class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title"><i class="fa fa-user-circle-o"></i> <span translate="MYVOLUMIO.SUBSCRIBE"></span></h3>
    </div>

    <div class="panel-body">

      <div ng-if="myVolumioSubscribeController.user && myVolumioSubscribeController.product">

        <my-volumio-back-button label="{{'MYVOLUMIO.PLANS' | translate}}" route-destination="myvolumio.plans">
        </my-volumio-back-button>

        <h3 translate="MYVOLUMIO.COMPLETE_UPGRADE"></h3>

        <p translate="MYVOLUMIO.PAY_DESC"></p>

        <my-volumio-plan-card subscribe='true' subscribe-callback='myVolumioSubscribeController.subscriptionCallback(subscribing)' product='myVolumioSubscribeController.product' show-mode="myVolumioSubscribeController.showMode">
        </my-volumio-plan-card>

      </div>

      <div id="" ng-if="!myVolumioSubscribeController.user">
        <h4 translate="MYVOLUMIO.YOURENT_LOGGED_DESC"></h4>
        <a ng-click="myVolumioSubscribeController.logIn()" class="btn btn-lg btn-success" translate="MYVOLUMIO.LOGIN"></a>
      </div>

      <div id="" ng-if="!myVolumioSubscribeController.product">
        <h4 translate="MYVOLUMIO.NO_SUBSCRIPTION_SELECTED_DESC"></h4>
        <a ng-click="myVolumioSubscribeController.goToPlans()" class="btn btn-lg btn-success" translate="MYVOLUMIO.RETRY"></a>
      </div>

    </div>
  </div>


</div>
</div>
